<template>
    <div class="app-login-container flex align-items-center justify-content-center">
        <div class="form-box">
            <div class="logo">
                <img :src="logo" alt="logo"/>
            </div>
            <h1>在线象棋对战游戏</h1>
            <el-form
                    ref="ruleFormRef"
                    :model="loginForm"
                    status-icon
                    :rules="rules"
                    class="login-form"
            >
                <el-form-item prop="username">
                    <el-input
                            :prefix-icon="User"
                            placeholder="请输入账号"
                            v-model="loginForm.username"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            :prefix-icon="Lock"
                            v-model="loginForm.password"
                            :show-password="true"
                            placeholder="请输入密码"
                            type="password"/>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" :loading="commonData.btnLoading" @click="handleLogin">登录</el-button>
                </el-form-item>
                <div class="tip">
                    <router-link to="/register">注册账号</router-link>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import logo from '@/assets/logo.png';
    import {User, Lock} from '@element-plus/icons-vue';
    import {reactive, ref, getCurrentInstance} from 'vue';
    import {useRouter} from 'vue-router';
    import {useStore} from 'vuex';
    import {api} from '@/utils/config';
    import service from '@/utils/service';

    const router = useRouter();
    const store = useStore();
    const {proxy} = getCurrentInstance();

    //表单数据
    const loginForm = reactive({
        username: 'admin',
        password: 'admin123'
    });
    const rules = reactive({
        username: [
            {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
        ]
    });
    const ruleFormRef = ref();
    const commonData = reactive({
        btnLoading: false
    });
    //处理登录
    const handleLogin = () => {
        ruleFormRef.value.validate(async (valid) => {
            if (valid) {
                commonData.btnLoading = true;
                service.doPost(api['login'], loginForm)
                    .then(async (response) => {
                        if (response.code === 1) {
                            proxy.$socket.io.emit('login', response.data);
                            await store.dispatch('handleSetIsLogin', true);
                            await store.dispatch('handleSetUserInfo', response.data);
                            await router.push({
                                path: '/index'
                            });
                        }
                        commonData.btnLoading = false;
                    }).catch(() => {
                    commonData.btnLoading = false;
                })
            }
        })
    }
</script>

<style scoped lang="less">
    .app-login-container {
        height: 100%;
        background-image: url('../assets/bg.jpg');
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center center;

        .form-box {
            text-align: center;
            -webkit-box-shadow: 0 0 15px 5px #C0C4CC;
            -moz-box-shadow: 0 0 15px 5px #C0C4CC;
            box-shadow: 0 0 15px 5px #C0C4CC;
            max-width: 380px;
            width: 100%;
            padding: 30px 15px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background: #fff;

            .logo {

                img {
                    width: 40px;
                }
            }

            h1 {
                font-size: 20px;
            }

            .login-form {
                width: 70%;
                margin: 30px auto 0;

                .btn {
                    button {
                        width: 100%;
                    }
                }

                .tip {
                    margin-top: -10px;
                    text-align: left;

                    a {
                        color: #909399;
                    }
                }
            }
        }
    }
</style>